<html>

<head>
	<script src="echarts.js"></script>
</head>

<body>
	<!-- <a id="download" href="">Download</a> -->
	
	<div id="main" style="width: 800px;height:400px;"></div>
	<script type="text/javascript">
		/*
		const a = window.document.querySelector('#download')
		  a.addEventListener('click', () => {
			const content = document.querySelector('svg').outerHTML
			const blob = new Blob([content], { type: 'xml/svg' })
			a.href = URL.createObjectURL(blob)
			a.download = 'test.svg'
		})
		*/

		var myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' });

		var option = {
			legend: {
				icon: 'rect',
				orient: 'horizontal',
				bottom: '5%',
				data: ['去向处理延迟', '回向处理延迟', '最优处理延迟']
			},
			title: {
				text: 'SDK 消息处理延迟百分位数值',
				subtext: '单位：微秒'
			},
			xAxis: {
				data: ['50%', '75%', '90%', '95%', '99%', '100%']
			},
			yAxis: {},
			series: [
				{
					name: '去向处理延迟',
					data: [553, 687, 841, 967, 1153, 2510],
					type: 'line',
					areaStyle: {}
				},
				{
					name: '回向处理延迟',
					data: [418, 511, 570, 630, 828, 2451],
					type: 'line',
					areaStyle: {}
				},
				{
					name: '最优处理延迟',
					data: [16, 20, 26, 34, 55, 95],
					type: 'line',
					areaStyle: {}
				}
			]
		};

		myChart.setOption(option);
	</script>
</body>

</html>